<template>
  <div class="content">
    <el-row :gutter="20" style="height: 100%">
      <el-col :span="14" style="height: 100%">
        <el-card class="box-card">
          <el-form :inline="true" :model="queryParam" class="demo-form-inline" size="medium">
            <el-form-item label="字典名称">
              <el-input v-model="queryParam.dictName" clearable placeholder="字典名称"></el-input>
            </el-form-item>
            <el-form-item label="字典编码">
              <el-input v-model="queryParam.dictCode" clearable placeholder="字典编码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="tableData" border style="width: 100%; height: 70%" highlight-current-row row-key="dictId"
            @row-click="rowClick">
            <el-table-column v-for="item of tablePropsDic" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button icon="el-icon-edit" link size="mini" @click="handleEdit(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination ref="pagination" :totalCount="totalCount" @pagination="pagination" style="margin: 10px 0 0 0">
          </pagination>
        </el-card>
      </el-col>
      <el-col :span="10" style="height: 100%; padding-left: 0">
        <el-card class="box-card">
          <div class="emptyCenter" v-if="!showItem">
            <el-empty description="选中左侧表格中的列，可进行切换字典值"></el-empty>
          </div>
          <el-button v-if="showItem" size="medium" class="button_top" icon="el-icon-plus" type="primary"
            @click="handleItemAdd">新增</el-button>
          <el-table v-if="showItem" :data="dictItemData" border style="width: 100%" height="90%">
            <el-table-column v-for="item of dictItemColumn" :key="item.props" :prop="item.prop" :label="item.title"
              :width="item.width">
              <template #default="scope">
                <div v-if="item.prop === 'itemText'">
                  <el-tooltip class="item" effect="dark" :content="scope.row.description || '暂无描述'" placement="top">
                    <span>
                      {{ scope.row.itemText }}
                    </span>
                  </el-tooltip>
                </div>
                <div v-else-if="item.prop === 'disabledFlag'">
                  <el-switch v-model="scope.row.disabledFlag" active-color="#13ce66" :active-value="0"
                    :inactive-value="1" @change="handleDisabled(scope.row)">
                  </el-switch>
                </div>
                <div v-else>{{ scope.row[item.prop] }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button icon="el-icon-edit" link size="mini" @click="handleItemEdit(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <dictionary-dialog ref="dictionaryDialog" @ok="loadData" />
    <dict-item-dialog ref="dictItemDialog" @ok="loadDictItemData" />
  </div>
</template>

<script>
import { sysDictPage, dictItemList, disabled } from '@/api/sys/dict'
import pagination from '@/components/pagination.vue'
import dictionaryDialog from './dictionaryDialog.vue'
import dictItemDialog from './dictItemDialog.vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Dictionary',
  components: { pagination, dictionaryDialog, dictItemDialog },
  data() {
    return {
      totalCount: 0, //总数
      //查询条件
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      queryParam: {},
      tableData: [],
      tablePropsDic: [
        { title: '字典名称', prop: 'dictName', width: '', checked: true },
        { title: '字典编码', prop: 'dictCode', width: '', checked: true },
        { title: '字典描述', prop: 'description', width: '', checked: true },
        // { "title": "字典类型", "prop": "fieldLength", "width": '', "checked": true },
      ],
      showItem: false,
      dictId: '',
      dictItemData: [],
      dictItemColumn: [
        { title: '字典项文本', prop: 'itemText', width: '', checked: true },
        { title: '字典项值', prop: 'itemValue', width: '', checked: true },
        // { title: '描述', prop: 'description', width: '', checked: true },
        // { "title": "排序", "prop": "sort", "width": '', "checked": true },
        { title: '是否停用', prop: 'disabledFlag', width: '', checked: true },
      ],
    }
  },

  mounted() {
    this.loadData()
  },

  methods: {
    reset() {
      this.queryParam = {}
      this.$refs.pagination.resetPagination()
    },
    // 分页的方法
    pagination(val) {
      this.searchModel.pageNo = val.page
      this.searchModel.pageSize = val.limit
      this.loadData()
    },
    onSubmit() {
      this.$refs.pagination.resetPagination()
    },
    loadData() {
      var param = Object.assign(this.queryParam, this.searchModel)
      sysDictPage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.records
            this.totalCount = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 打开添加的对话框
    handleAdd() {
      this.$refs.dictionaryDialog.add()
    },
    // 编辑
    handleEdit(row) {
      this.$refs.dictionaryDialog.edit(row)
    },
    rowClick(row) {
      this.showItem = true
      this.dictId = row.dictId
      var param = {
        dictId: row.dictId,
      }
      dictItemList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.dictItemData = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    loadDictItemData() {
      var param = {
        dictId: this.dictId,
      }
      dictItemList(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.dictItemData = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    handleItemAdd() {
      this.$refs.dictItemDialog.add(this.dictId)
    },
    handleItemEdit(row) {
      this.$refs.dictItemDialog.edit(row)
    },
    handleDisabled(row) {
      const param = {
        dictItemId: row.dictItemId,
        disabledFlag: row.disabledFlag,
      }
      disabled(param).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.loadDictItemData()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  height: 90%;

  .box-card {
    height: 100%;

    .el-card__body {
      height: 100%;
    }
  }

  .button_top {
    margin: 10px 0;
  }
}

.emptyCenter {
  height: 100%;
  display: flex;
  justify-content: center;
}
</style>
